import type { ComponentMeta } from '@/definitions/type'
import { EWebDesignerComponentBackground, EWebDesignerComponentTheme } from '@/api/designer/model'
import { useDesignStore, useInstStore } from '@/stores'
import { followThemeValue } from '@/utils/constants'
import { computed, type CSSProperties } from 'vue'

export function useCompStyleRender(props: { render: ComponentMeta }) {
  const instStore = useInstStore()
  const designStore = useDesignStore()
  const platform = computed(() => designStore.config.platform)
  const wraperCls = computed(() => {
    // @ts-ignore
    if (props.render.config.theme === EWebDesignerComponentTheme.深色) {
      return 'dark'
    }
    // @ts-ignore
    else if (props.render.config.theme === EWebDesignerComponentTheme.浅色) {
      return 'light'
    }
    return ''
  })
  const style = computed<CSSProperties>(() => {    
    const result: CSSProperties = {}
    /* eslint-disable ts/no-unused-expressions */ 
    instStore.detail?.themeColor
    // @ts-ignore
    const isColor = props.render.config.background === EWebDesignerComponentBackground.纯色 || props.render.config.background === EWebDesignerComponentBackground.无背景
    // @ts-ignore
    const isImage = props.render.config.background === EWebDesignerComponentBackground.图片
    if (isColor || isImage) {
      if (props.render.config.backgroundValue) {
        if (isColor) {
          result.background = props.render.config.backgroundValue
        }
        else if (isImage) {
          result.backgroundImage = `url(${props.render.config.backgroundValue})`
        }
      }
    }
    // @ts-ignore
    else if (props.render.config.background === EWebDesignerComponentBackground.主题色) {
      const { themeColor, themeColorLight } = instStore.getCurrentDesignerThemeColor()
      // @ts-ignore
      // if (props.render.config.backgroundValue === followThemeValue.deep) {
      //   result.background = themeColor
      // }
      // @ts-ignore
      if (props.render.config.backgroundValue === followThemeValue.light.toString()) {
        result.background = themeColorLight
      }
      else {
        result.background = themeColor
      }
    }
    if (platform.value === 'mobile') {
      return Object.assign(result, {
        paddingTop: `${props.render.config.paddingTop}px`,
        paddingBottom: `${props.render.config.paddingBottom}px`,
        paddingLeft: `${props.render.config.paddingLeft}px`,
        paddingRight: `${props.render.config.paddingRight}px`,
      })
    }
    return Object.assign(result, {
      paddingTop: `${props.render.config.paddingTopPC}px`,
      paddingBottom: `${props.render.config.paddingBottomPC}px`,
      paddingLeft: `${props.render.config.paddingLeftPC}px`,
      paddingRight: `${props.render.config.paddingRightPC}px`,
    })
  })
  return {
    wraperCls,
    style,
  }
}
